<script setup lang="ts">
import {onMounted, ref} from "vue";
import TeamCardList from "../components/TeamCardList.vue";
import {TeamType} from "../models/team";
import "../../global.css"
import {useRouter} from "vue-router";
import requestApi from "../plugins/requestApi.ts";
import {showFailToast} from "vant";
import {CurrentUser} from "../models/user";
import getCurrentUser from "../states/userApi.ts";

const teamList = ref<TeamType[]>();
const router = useRouter();
const status = ref('0');
const currentUser = ref<CurrentUser>();
onMounted(async () => {
  currentUser.value = await getCurrentUser();
  clickTab();
})
const clickTab = async () => {
  let res;
  if (status.value === '1') {
    res = await requestApi.get('/team/getCreateTeam');
  }
  if (status.value === '0') {
    res = await requestApi.get('/team/getJoinTeam');
  }
  if (res) {
    teamList.value = res;
  } else {
    showFailToast('获取失败');
  }
}
</script>

<template>
  <van-tabs v-model:active="status" @click-tab="clickTab">
    <van-tab title="我加入的" name="0">
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <TeamCardList v-if="teamList" :team-list="teamList" :current-user="currentUser"/>
    </van-tab>
    <van-tab title="我创建的" name="1">
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <van-skeleton v-if="!teamList" title :row="3"/>
      <TeamCardList v-if="teamList" :team-list="teamList" :current-user="currentUser"/>
    </van-tab>
  </van-tabs>
  <van-button class="add-button" icon="plus" type="primary" @click="router.push('/team/add')" round/>
</template>

<style scoped>
.add-button {
  position: fixed;
  bottom: 110px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>